<template>
  <div class="addShoppingList">
    <div class="calendar">
      <van-calendar v-model:show="calendarShow" type="single" @confirm="onConfirm" switch-mode="month"
        color="rgb(181, 202, 161)" :show-confirm="false" :formatter="formatter" ref="calendar" 
        v-on:open="calendarOpen"/>
      <!-- v-on:closed="calendarClosed" -->
    </div>
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner fixedBanner">
        <van-nav-bar fixed>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <div class="banner-title" style="font-size: 20px;">购物清单</div>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 购物清单信息 -->
      <div class="savingsPlan-info panel">
        <div class="savingsPlan-title">
          <div class="panel-title-icon"></div>
          <div>购物清单信息</div>
        </div>
        <div class="savingsPlan-info-main">
          <div class="savingsPlan-info-main-t">
            <div class="savingsPlan-icon">🤓</div>
            <div class="savingsPlan-info-text">
              <div class="savingsPlan-info-name">{{ spName != '' ? spName : '-' }}</div>
              <div class="savingsPlan-info-notes">{{ spNotes != '' ? spNotes : '-' }}</div>
            </div>
          </div>
          <div class="savingsPlan-main-input">
            <van-cell-group inset>
              <van-field v-model="spName" placeholder="名称(最多15字符)" maxlength="15" />
            </van-cell-group>
          </div>
          <div class="savingsPlan-main-input">
            <van-cell-group inset>
              <van-field v-model="spNotes" placeholder="备注(最多150字符)" maxlength="15" />
            </van-cell-group>
          </div>
        </div>
      </div>
      <!-- 购物清单任务 -->
      <div class="savingsPlan-task panel">
        <div class="savingsPlan-title">
          <div class="panel-title-icon"></div>
          <div>购物清单任务</div>
        </div>
        <!-- 开始时间 -->
        <div class="savingsPlan-task-main" @click="showCalendar(0)">
          <div class="savingsPlan-task-info">
            <div class="savingsPlan-task-icon">
              <van-icon name="play-circle-o" size="30" color="gray" />
            </div>
            <div class="savingsPlan-task-text">
              <div class="savingsPlan-task-title">开始时间</div>
              <div class="savingsPlan-task-tag">{{ formatDate(starDate) }}</div>
            </div>
          </div>
          <div class="savingsPlan-task-right">
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 结束时间 -->
        <div class="savingsPlan-task-main" @click="showCalendar(1)">
          <div class="savingsPlan-task-info">
            <div class="savingsPlan-task-icon">
              <van-icon name="stop-circle-o" size="30" color="gray" />
            </div>
            <div class="savingsPlan-task-text">
              <div class="savingsPlan-task-title">结束时间</div>
              <div class="savingsPlan-task-tag">{{ formatDate(stopDate) }}</div>
            </div>
          </div>
          <div class="savingsPlan-task-right">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="main-b">
      <div class="fixedBtn" @click="saveSavingPlan()">保存</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="addShoppingList">
// 添加购物清单
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { type CalendarInstance } from 'vant';

const router = useRouter()

let spName = ref('') // 购物清单 名称
let spNotes = ref('') // 购物清单 备注

const date = new Date()

let initDate = ref(date) // 初始时间(当天)
let starDate = ref(initDate.value) // 开始时间
let stopDate = ref(initDate.value) // 结束时间

let dateType = reactive({ type: 0 })
let calendar = ref<CalendarInstance>() // 日历实例对象
// 打开日历
function showCalendar(type: number) {
  dateType.type = type
  calendarShow.value = true
}

// 日历显示
// 选择日期
// let selectDate = ref(initDate.value)
const calendarShow = ref(false) // 日历弹窗显示
// 格式化日期
function formatDate(date: any) {
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

// 日期选择完成
function onConfirm(value: any) {
  calendarShow.value = false

  if (dateType.type == 0) {
    starDate.value = value
  } else {
    stopDate.value = value
  }
}

// 对日历上的每一个内容进行格式化
function formatter(day: any) {
  const year = day.date.getFullYear()
  const month = day.date.getMonth() + 1
  const date = day.date.getDate()

  const todayDate = new Date()

  const thisYear = todayDate.getFullYear()
  const thisMouth = todayDate.getMonth() + 1
  const thisDate = todayDate.getDate()

  // 标记今天
  if (year === thisYear && month === thisMouth && date === thisDate) {
    day.bottomInfo = '今天'
  }

  return day
}

// 打开日历
function calendarOpen() {
   // 重置默认时间
  if (dateType.type == 0) {
    calendar.value?.reset(initDate.value)
  } else {
    calendar.value?.reset(initDate.value)
  }
}


// 返回上一页
function back() {
  router.go(-1)
}

// 保存购物清单
function saveSavingPlan() {
  console.log('保存购物清单')
}
</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);

.addShoppingList {
  min-height: 100vh;
  padding-bottom: 100px;
}

.main-t {
  margin-bottom: 1.8rem;
}

.main-c {
  font-size: 30px;
  margin: @gabelMargin;

  .savingsPlan-title {
    display: flex;
    align-items: center;
  }

  .savingsPlan-info {
    .savingsPlan-info-main {
      margin: 20px 0;

      .savingsPlan-info-main-t {
        display: flex;
        align-items: center;

        .savingsPlan-info-notes {
          font-size: 25px;
          color: gray;
        }
      }
    }
  }

  .savingsPlan-task {
    .savingsPlan-task-main {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .savingsPlan-task-info {
        display: flex;
        align-items: center;

        .savingsPlan-task-icon {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: @grayBgColor;
        }

        .savingsPlan-task-text {
          .savingsPlan-task-tag {
            font-size: 25px;
            color: gray;
          }
        }
      }

      .savingsPlan-task-right {
        display: flex;
        align-items: center;
        color: gray;

        .savingsPlan-task-right-text {
          font-size: 25px;
        }
      }
    }
  }
}

.savingsPlan-main-input {
  margin: 25px -15px;
}

.van-cell {
  background-color: @grayBgColor;
  border-radius: 50px;

  ::placeholder {
    color: gray;
  }
}
</style>